<template>
  <div>
    <el-table v-if="dataList.length > 0" :data="dataList" style="width: 100%" border class="center-table">
      <el-table-column prop="name" label="漏洞名称" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
          <span class="ellipsis-cell">{{ scope.row.name }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="holeTime" label="漏洞时间" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.holeTime" placement="top">

          <span class="ellipsis-cell">{{ scope.row.holeTime }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="漏洞类型" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.type" placement="top">
            <span class="ellipsis-cell">{{ scope.row.type }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="effect" label="漏洞效果" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.effect" placement="top">
            <span class="ellipsis-cell">{{ scope.row.effect }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="漏洞描述" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.desc" placement="top">
            <span class="ellipsis-cell">{{ scope.row.desc }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="applicableVersion" label="适用版本" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.applicableVersion" placement="top">
            <span class="ellipsis-cell">{{ scope.row.applicableVersion }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="condition" label="使用条件" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.condition" placement="top">
            <span class="ellipsis-cell">{{ scope.row.condition }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="publicly" label="是否公开" align="center">
        <template #default="scope">
          <span>{{ scope.row.publicly }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="repaired" label="是否修复" align="center">
        <template #default="scope">
          <span>{{ scope.row.repaired }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="漏洞评分" align="center">
        <template #default="scope">
          <span>{{ scope.row.score }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button size="mini" v-if="isAdmin" @click="editRow(scope.row)">编辑</el-button>
          <el-button size="mini" v-if="isAdmin" type="danger" @click="deleteRow(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-else class="no-data">
      <p>当前没有漏洞数据。</p>
    </div>

    <!-- 编辑弹出层 -->
    <dimensionitem ref="dimensionDialog" @submit="handleEditSubmit" />
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  conditiongetToolList,
  insertgetToolList,
  updategetToolList,
  deletegetToolList,
  IdinsertgetToolList
} from "@/api/tool/tool";
import dimensionitem from "./dimensionitem.vue";
import { mapGetters } from "vuex";

export default {
  components: { dimensionitem },
  props: {
    toolId: {
      type: String,
      required: true, // 接收父组件传递的 currentToolId
    },
    generalId: {
      type: String,
      required: true, // 接收父组件传递的 generalId
    },
  },
  data() {
    return {
      dataList: [], // 当前工具的子维度列表数据
    };
  },

  watch: {
    toolId: {
      immediate: true,
      handler(newToolId) {
        console.log("接收到的工具ID:", newToolId);
        if (newToolId) {
          this.fetchChildDimensions(newToolId); // 当 toolId 不为空时刷新列表
        } else {
          this.dataList = []; // 清空子维度列表
        }
      },
    },
  },
  computed: {
    ...mapGetters("permissions", ["getUsername", "isAdmin"]),
  },  
  methods: {
    async childgetToolList() {
      try {
        const toolIds = this.toolId.split(","); // 将 toolId 转换为数组
        const { data } = await IdinsertgetToolList({ ids: toolIds.join(",") }); // 解构赋值接收数据
        this.dataList = data; // 更新子维度数据
        console.log("子维度列表数据666666:", this.dataList);
      } catch (error) {
        console.error("获取子维度数据失败:", error);
        this.$message.error("获取子维度数据失败，请稍后再试");
      }
    },
    async fetchChildDimensions(toolId) {
      try {
        const response = await conditiongetToolList({ id: toolId });
        // this.dataList =  response.data
        console.log("子维度列表数据:213", response, 529854159);
        this.childgetToolList(); // 调用获取子维度数据的方法
      } catch (error) {
        console.error("获取子维度数据失败:", error);
        this.$message.error("获取子维度数据失败，请稍后再试");
      }
    },
    async insertgetToolList(data) {
      try {
        const payload = { ...data, generalId: this.generalId };
        console.log("提交到后端的数据:", payload);
        const response = await insertgetToolList(payload)
        this.dataList = response.data.data
        console.log("新增成功:", response);
        this.$message.success("新增成功");
        // this.childgetToolList(); // 调用获取子维度数据的方法
      } catch (error) {
        console.error("新增失败:", error);
        this.$message.error("新增失败，请稍后再试");
      }
    },
    editRow(row) {
      console.log("编辑行数据:", row);
      // 延迟调用以确保 DOM 更新后再打开弹出层
      this.$nextTick(() => {
        // 确保数据为新对象，防止引用问题
        const rowData = JSON.parse(JSON.stringify(row));
        this.$refs.dimensionDialog.open(rowData); // 打开弹出层并传递行数据
      });
    },
    async handleEditSubmit(updatedData) {
      if (updatedData.holeTime) {
        updatedData.holeTime = dayjs(updatedData.holeTime).format("YYYY-MM-DD HH:mm:ss");
      }
      console.log("接收到的更新数据:", updatedData);
      try {
        const response = await updategetToolList(updatedData);
        console.log("更新成功:", response);
        if (response.data.code !== 0) {
          this.$message.error("更新失败，请稍后再试");
          return;
        }
        this.$message.success("更新成功");
        await this.childgetToolList(); // 更新成功后刷新当前工具的子维度列表
      } catch (error) {
        console.error("更新失败:", error);
        this.$message.error("更新失败，请稍后再试");
      }
    },
    deleteRow(id) {
      const generalId = this.generalId; // 获取 generalId
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        type: "warning",
      })
        .then(async () => {
          try {
            const response = await deletegetToolList({ id, generalId });
            console.log("删除成功:", response);
            this.$message.success("删除成功");
            await this.fetchChildDimensions(this.toolId); // 删除成功后刷新当前工具的子维度列表
          } catch (error) {
            console.error("删除失败:", error);
            this.$message.error("删除失败，请稍后再试");
          }
        })
        .catch(() => {
          this.$message.info("已取消删除操作");
        });
    },
    receiveAddDimensionForm(data) {
      console.log("接收到父组件传递的添加子维度数据:", data);
      if (data.holeTime) {
        data.holeTime = dayjs(data.holeTime).format("YYYY-MM-DD HH:mm:ss");
      }

      this.insertgetToolList(data); // 调用新增接口
    },
  },
};
</script>

<style scoped>
.center-table  {
  border-radius: 10px;
}
.center-table .el-table__cell {
  text-align: center;
}

.no-data {
  text-align: center;
  color: #909399;
  font-size: 16px;
  margin-top: 20px;
}

.ellipsis-cell {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis; /* 确保文字溢出时显示省略号 */
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  position: relative; /* 添加定位 */
  padding-right: 3px; /* 为省略号留出空间 */
}

/* 确保省略号显示在文本末尾 */
.ellipsis-cell::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 25px; /* 渐变宽度 */
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5) 50%);
  pointer-events: none; /* 确保不影响鼠标事件 */
  opacity: 0; /* 初始状态隐藏 */
}

/* 当文本溢出时显示渐变效果 */
.ellipsis-cell.is-overflow::after {
  opacity: 1;
}
</style>
